<template>
  <div>
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="菜单名称">
        <el-input v-model="ruleForm.menuName"></el-input>
      </el-form-item>
      <el-form-item label="菜单路径">
        <el-input v-model="ruleForm.menuUrl"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "@/unit/request";
export default {
  props: {
    menuId: Number,
  },
  data() {
    return {
      ruleForm: {
        menuId: "",
        menuName: "",
        menuUrl: "",
      },
    };
  },

  methods: {
    GetMenu() {
      axios.get("/Menu/QueryFirst?id=" + this.ruleForm.menuId).then((res) => {
        this.ruleForm = res.data.data;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.put("/Menu/Update", this.ruleForm).then((res) => {
            if (res.data.code == 1) {
              this.$message.success(res.data.message);

              this.$emit("Update");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },

  created() {
    this.ruleForm.menuId = this.menuId;
    this.GetMenu();
  },

  watch: {
    menuId(newMenuId) {
      this.ruleForm.menuId = newMenuId;
    },
  },
};
</script>
<style>
</style>